<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>工序管理系统帮助</span>
        </div>
      </template>
      
      <el-tabs type="border-card">
        <el-tab-pane label="工序类型管理">
          <div class="help-content">
            <h3>工序类型管理功能介绍</h3>
            <p>工序类型管理模块用于创建和维护工序类型树，这些类型将用于工序管理模块分类工序。</p>
            
            <h4>主要功能</h4>
            <ul>
              <li><strong>新增工序类型：</strong> 点击"新增"按钮，可以创建新的工序类型。如果在某个类型上点击"新增"，将创建该类型的子类型。</li>
              <li><strong>修改工序类型：</strong> 点击指定工序类型行的"修改"按钮，可以编辑该类型的信息。</li>
              <li><strong>删除工序类型：</strong> 点击指定工序类型行的"删除"按钮，可以删除该类型。注意：如果该类型已被工序使用或有子类型，将无法删除。</li>
              <li><strong>展开/折叠：</strong> 可以通过"展开/折叠"按钮控制树形结构的展开状态。</li>
            </ul>
            
            <h4>注意事项</h4>
            <ol>
              <li>工序类型支持多层级结构，请合理规划层级关系。</li>
              <li>删除操作不可恢复，请谨慎操作。</li>
              <li>如果某个工序类型下有工序，删除前需要先处理依赖关系。</li>
            </ol>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="工序管理">
          <div class="help-content">
            <h3>工序管理功能介绍</h3>
            <p>工序管理模块用于创建和维护生产工序，可以定义工序的详细信息，如编号、名称、标准工时等。</p>
            
            <h4>主要功能</h4>
            <ul>
              <li><strong>新增工序：</strong> 点击"新增"按钮，可以创建新的工序。</li>
              <li><strong>修改工序：</strong> 点击指定工序行的"修改"按钮，可以编辑该工序的信息。</li>
              <li><strong>删除工序：</strong> 点击指定工序行的"删除"按钮，可以删除该工序。</li>
              <li><strong>导出工序：</strong> 点击"导出"按钮，可以将当前筛选条件下的工序导出为Excel文件。</li>
            </ul>
            
            <h4>工序属性说明</h4>
            <el-table :data="processAttributes" border style="width: 100%">
              <el-table-column prop="attribute" label="属性" width="150"></el-table-column>
              <el-table-column prop="description" label="说明"></el-table-column>
            </el-table>
            
            <h4>常见问题</h4>
            <el-collapse>
              <el-collapse-item title="1. 如何批量导入工序？" name="1">
                <p>目前系统不支持批量导入工序，需要逐个添加。如有批量导入需求，请联系系统管理员。</p>
              </el-collapse-item>
              <el-collapse-item title="2. 工序编号有什么规则？" name="2">
                <p>工序编号建议采用有意义的编码，例如：产品类型-工序序号，如"A-001"表示A类产品的第一道工序。</p>
              </el-collapse-item>
              <el-collapse-item title="3. 无法删除某个工序怎么办？" name="3">
                <p>可能是因为该工序已被其他模块引用。请检查是否有工单或产品正在使用该工序，先解除关联后再删除。</p>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="故障排除">
          <div class="help-content">
            <h3>常见问题排除</h3>
            
            <h4>页面加载问题</h4>
            <ul>
              <li><strong>页面加载缓慢：</strong> 可能是网络问题或服务器负载高，请刷新页面或稍后再试。</li>
              <li><strong>按钮无响应：</strong> 请尝试清除浏览器缓存或使用其他浏览器。也可以尝试访问<router-link to="/system-info/index">系统信息</router-link>页面清除缓存。</li>
              <li><strong>页面显示异常：</strong> 请检查浏览器是否为最新版本，建议使用Chrome、Firefox或Edge浏览器。</li>
            </ul>
            
            <h4>API测试工具</h4>
            <p>如果遇到功能不正常的情况，可以使用以下测试工具检查API连接：</p>
            <ul>
              <li><router-link to="/process-api-test/index">工序API测试</router-link></li>
              <li><router-link to="/process-type-api-test/index">工序类型API测试</router-link></li>
            </ul>
            
            <h4>联系支持</h4>
            <p>如果问题无法解决，请联系系统管理员或技术支持团队，并提供以下信息：</p>
            <ol>
              <li>问题详细描述</li>
              <li>问题发生时间</li>
              <li>浏览器类型和版本</li>
              <li>操作系统类型和版本</li>
              <li>错误截图或日志信息</li>
            </ol>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "QmsHelp",
  data() {
    return {
      processAttributes: [
        { attribute: "工序编号", description: "工序的唯一标识码，用于系统识别和跟踪工序" },
        { attribute: "工序名称", description: "工序的名称，简明扼要地描述工序内容" },
        { attribute: "工序类型", description: "工序所属的类型，用于分类管理" },
        { attribute: "工序描述", description: "工序的详细说明，可描述具体操作步骤、注意事项等" },
        { attribute: "标准工时", description: "完成该工序的标准时间，以分钟为单位" },
        { attribute: "状态", description: "工序的使用状态，可为正常或停用" },
        { attribute: "备注", description: "其他需要补充说明的信息" }
      ]
    };
  }
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.help-content {
  padding: 10px 0;
}

.help-content h3 {
  margin-top: 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.help-content h4 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 600;
  color: #303133;
}

.help-content ul, .help-content ol {
  padding-left: 20px;
  margin-bottom: 15px;
}

.help-content li {
  margin-bottom: 5px;
  line-height: 1.6;
}

.help-content p {
  line-height: 1.6;
  margin-bottom: 15px;
}
</style> 